<script lang="ts" setup>
import type { Component } from "vue";

const props = withDefaults(
  defineProps<{
    isActive?: boolean;
    disabled?: boolean;
    title?: string;
    action?: () => void;
    icon?: Component;
  }>(),
  {
    isActive: false,
    disabled: false,
    title: undefined,
    action: undefined,
    icon: undefined,
  }
);

const action = () => {
  if (props.disabled) return;
  props.action?.();
};
</script>

<template>
  <div
    class="toolbar-sub-item"
    :class="{
      'is-active': isActive,
      'is-disabled': disabled,
    }"
    @click="action"
  >
    <component
      :is="icon"
      class="toolbar-sub-item-icon"
      :class="{
        'is-active': isActive,
        'is-disabled': disabled,
      }"
    />
    <span
      class="toolbar-sub-item-title"
      :class="{
        'is-active': isActive,
        'is-disabled': disabled,
      }"
    >
      {{ title }}
    </span>
  </div>
</template>

<style lang="scss" scoped>
.toolbar-sub-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem; // gap-3
  border-radius: 0.25rem; // rounded
  padding: 0.25rem 0.375rem; // px-1.5 py-1
  cursor: pointer;

  &.is-active {
    background-color: var(--editor-button-hover-bg) !important;
  }

  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }

  &:not(.is-disabled):hover {
    background-color: var(--editor-button-hover-bg);

    .toolbar-sub-item-title {
      font-weight: 500; // group-hover:font-medium
      color: var(--editor-button-text-active);
    }
  }
}

.toolbar-sub-item-icon {
  height: 1.75rem; // h-7
  width: 1.75rem; // w-7
  border-radius: 0.25rem; // rounded
  padding: 0.375rem; // p-1.5
}

.toolbar-sub-item-title {
  font-size: 0.875rem; // text-sm
  color: var(--editor-button-text);

  &.is-active {
    font-weight: 500 !important; // !font-medium
    color: var(--editor-button-text-active) !important;
  }
}
</style>
